<template>
    <div class="box">
        <div class="top">
            <van-nav-bar title="详情" left-arrow @click-left="$router.go(-1)" />
        </div>
        <div class="content">
            <img :src="obj.image" alt="">
            <p>{{ obj.title }}</p>
            <p style="color: red;">￥{{ obj.price }}</p>
        </div>
        <div class="foot">
            <van-action-bar>
                <van-action-bar-icon icon="chat-o" text="客服" dot />
                <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
                <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
                <van-action-bar-button type="warning" text="加入购物车" @click="addCart" />
                <van-action-bar-button type="danger" text="立即购买" />
            </van-action-bar>
        </div>
    </div>
</template>
<script setup>
import request from '@/utils/request'
// 如何从地址栏获取到id
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const obj = ref({})
onMounted(() => {
    request.get('/detail', {
        params: { id: route.params.id }
    }).then(res => {
        if (res.data.code == 200) {
            console.log(res.data.data);

            obj.value = res.data.data
        }

    })

})
const addCart = () => {
    //  判断用户是否登录
    if (localStorage.getItem('token')) {
        // 说明用户已登录

    } else {
        // 说明用户未登录
        // 跳转登录页面
        router.push('/login')
    }
}

</script>
